<template>
	<div class="app">
		<h1>{{msg}}，学生姓名是:{{studentName}}</h1>

		<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<School :getSchoolName="getSchoolName"/>

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
		<!-- <Student @atguigu="getStudentName" @demo="m1"/> -->

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
		<!-- @click认为是绑定自定义事件，加.native才是绑定原生事件 绑定在Student的div根上-->
		<!--  所以要求template只有一个根元素-->
		<Student ref="student" @click="show"/>
		<!-- <Student ref="student" @click.native="show"/> -->
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
				msg:'你好啊！',
				studentName:''
			}
		},
		methods: {
			getSchoolName(name){
				console.log('App收到了学校名：',name)
			},
			getStudentName(name,...params){
				console.log('App收到了学生名：',name,params)
				this.studentName = name
			},
			m1(){
				console.log('demo事件被触发了！')
			},
			show(){
				alert(123)
			}
		},
		mounted() {
			// 可加入定时器更灵活，例如：三秒后点击有效
			// this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件 推荐
			// this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
			// 谁触发的事件，this就是谁，student组件实例

			//在父组件给子绑定事件on，由子来触发emit，回调留在父组件里
			// this.$refs.student.$on('atguigu',function(name, ...params) {
			// 	console.log('name', name, params)
			// 	console.log('this',this)
			// 	this.studentName = name
			// })
			// 箭头函数的this指针为当前函数的外围实例，就是mounted的函数的this，
			// 而mounted函数的this为App实例
			this.$refs.student.$on('atguigu',(name, ...params) => {
				console.log('name', name, params)
				console.log('this',this)
				this.studentName = name
			})
		},
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>
